// 封装组件
//把功能代码都放在组件中，把可变的部分抽象成prop参数
import * as echarts from "echarts";
import { useEffect, useRef } from "react";
const BarChart = ({title}) => {
  const chartRef = useRef(null);
  useEffect(() => {
    //获取渲染的dom节点
    // const chartDom = document.getElementById('main');
    const chartDom = chartRef.current;
    //图标初始化生成图标实例对象
    const myChart = echarts.init(chartDom);
    //准备图标参数
    const option = {
      title: {
        text: title,
      },
      xAxis: {
        type: "category",
        data: ["react", "nest", "计网", "算法", "图形学", "os"],
      },
      yAxis: {
        type: "value",
      },
      series: [
        {
          data: [120, 200, 150, 80, 70, 110],
          type: "bar",
        },
      ],
    };

    option && myChart.setOption(option);
  }, []);
  return (
    // 图标的渲染必须是一个具备宽高的节点

    <div
      ref={chartRef}
      style={{
        width: "700px",
        height: "400px",
      }}
    ></div>
  );
};
export default BarChart;
